<template>
    <div>
        <titleNav></titleNav>
        <div class="box">
            <div class="swiper-container  swiper-container-father">
                <div class="swiper-wrapper swiper-father">
                    <div class="swiper-slide">
                        <page1></page1>
                        <triangle class="button-next"></triangle>
                    </div>
                    <div class="swiper-slide">
                        <page2></page2>
                        <triangle class="button-next"></triangle>
                    </div>
                    <div class="swiper-slide">
                        <page3></page3>
                        <triangle class="button-next"></triangle>
                    </div>
                    <div class="swiper-slide">
                        <page4></page4>
                    </div>
                </div>
                <!--                <div class="swiper-pagination"></div>-->
                <!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
            </div>
        </div>
        <ul class="dot">
            <!--           当前页面数 {{swiper.activeIndex}}-->
            <div style="position: relative">
                <transition name="dot">
                    <div style="position: absolute;top: -7px" v-if="dotNow==0">首页 ——</div>
                </transition>
                <li :class="swiper.activeIndex==0?'blueDot':'none'" @click="swiper.slideTo(0)" @mouseenter="dotNow=0"
                    @mouseleave="dotNow=-1"></li>
            </div>
            <div style="position: relative">
                <transition name="dot">
                    <div style="position: absolute;top: 42px" v-if="dotNow==1">产品 ——</div>
                </transition>
                <li :class="swiper.activeIndex==1?'blueDot':'none'" @click="swiper.slideTo(1)" @mouseenter="dotNow=1"
                    @mouseleave="dotNow=-1"></li>
            </div>
            <div style="position: relative">
                <transition name="dot">
                    <div style="position: absolute;top: 92px" v-if="dotNow==2">新闻中心 —</div>
                </transition>
                <li :class="swiper.activeIndex==2?'blueDot':'none'" @click="swiper.slideTo(2)" @mouseenter="dotNow=2"
                    @mouseleave="dotNow=-1"></li>
            </div>
            <div style="position: relative">
                <transition name="dot">
                    <div style="position: absolute;top: 142px" v-if="dotNow==3">关于我们 —</div>
                </transition>
                <li :class="swiper.activeIndex==3?'blueDot':'none'" @click="swiper.slideTo(3)" @mouseenter="dotNow=3"
                    @mouseleave="dotNow=-1"></li>
            </div>
        </ul>
    </div>
</template>

<script>
    import 'swiper/dist/js/swiper'
    import 'swiper/dist/css/swiper.css'
    import Swiper from "swiper"
    import titleNav from "../../components/titleNav";
    import page1 from "./page1";
    import page2 from "./page2";
    import page3 from "./page3";
    import page4 from "./page4";
    import triangle from "./triangle";

    export default {
        data() {
            return {
                screenWidth: document.documentElement.clientHeight,  // 这里是给到了一个默认值 （这个很重要）
                sonPage: 0,
                swiper: {},
                //  右边小点,  象征着此时鼠标悬停位置
                dotNow: -1,
            };
        },
        methods: {},
        created() {
            // console.log(this.screenWidth)
            this.$store.commit('changePage', 1)
            this.$store.commit('changeHeight', this.screenWidth)
        },
        mounted() {
            let that = this
            // eslint-disable-next-line no-unused-vars
            this.swiper = new Swiper(".swiper-container", {
                //是否循环
                // loop: true,
                mousewheel: true, //允许鼠标滑轮滚动
                // grabCursor: true,
                direction: "vertical",
                pagination: {
                    //小圆点
                    el: ".swiper-pagination",
                    clickable: true,
                },
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                speed: 1200,//转动速度
                navigation: {
                    nextEl: '.button-next',
                },
                on: {
                    slideChange: function () {
                        // console.log(this)
                        that.$store.commit('changeSonPage', this.activeIndex)
                        // this.$store.commit('changeSonPage',this.activeIndex)
                    },
                }
            });
            //监听浏览器高度
            // window.onresize = () => {
            //     this.screenWidth = document.documentElement.clientHeight
            //     console.log(this.screenWidth)
            //     that.$store.commit('changeHeight', this.screenWidth)
            // }

        },
        components: {
            titleNav,
            page1,
            page2,
            page3,
            page4,
            triangle
        }
    };

</script>

<style scoped lang="less">
    .swiper-father {
        height: 100%;
    }

    .box {
        position: fixed;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: url("../../assets/indexImg/index_bg.jpg");
    }

    .swiper-container-father {
        /*border: 1px solid #0f0;*/
        /*width: 600px;*/
        height: 100%;
    }

    /*//点点相关操作*/
    /deep/ .swiper-pagination {
        right: 2%;

        .swiper-pagination-bullet {
            width: 10px !important;
            height: 10px;
            margin-bottom: 50px !important;
            background-color: white !important;
            opacity: 1 !important;
            box-shadow: 0px 0px 15px white;
        }

        .swiper-pagination-bullet-active {
            background-color: rgb(113, 193, 255) !important;
        }
    }

    .dot {
        position: fixed;
        list-style: none;
        z-index: 44;
        right: 3%;
        top: 38%;
    }

    .dot > div {
        /*overflow: hidden;*/
        color: white;
    }

    //文字的效果
    .dot > div > div {
        color: #71cfff;
        width: 200px;
        text-align: right;
        right: 25px;
    }

    //小点的效果
    .dot > div > li {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: white;
        margin-bottom: 40px;
        cursor: pointer;
        float: right;
        box-shadow: 0px 0px 10px white;
    }

    .blueDot {
        background-color: #71cfff !important;
    }

    //小点的文字
    .dot-leave-to {
        opacity: 0;
        transform: translate(-30px);
    }

    .dot-enter {
        opacity: 0;
        transform: translate(-30px);
    }

    .dot-enter-active,
    .dot-leave-active {
        transition: all 0.8s ease;
    }

</style>